export const demoList = [
  {
    name: '轮播图',
    url: '/demo/lubo/index.html',
    id: 0,
    html: `<div id="outer">
  <p id="info">一共 5 张图片，当前第 1 张</p>
  <img src="img/1.jpg" id="img" alt="冰棍" />
  <ul id="box"></ul>
  <button id="prev" onclick="onPrev()">上一张</button>
  <button id="next" onclick="onNext()">下一张</button>
</div>`,
    css: `*{
  margin: 0;
  padding: 0;
}
li{
  display: inline-block;
  background: #999;
  border-radius: 5px;
  height: 10px;
  width: 10px;
  margin: 10px;
}
li.cur{
  background: #333;
}
img{
  transition: 3s;
}
#outer{
  width: 500px;
  margin: 50px auto;
  padding: 10px;
  background-color: greenyellow;
  /*设置文本居中*/
  text-align: center;
  transition: .3s;
}`,
    js: `var imgarr = ['1.jpg','2.jpg','3.jpg','4.jpg','5.jpg'];
var imgid = document.getElementById('img');
var prev = document.getElementById('prev');
var info = document.getElementById('info');
var ulbox = document.getElementById('box');
var i = 0;
/*
  ======================================================
*/
info.innerText = '一共'+imgarr.length+'张图片,' + '当前第 '+(i+1)+' 张'
for (var j = 0; j < imgarr.length; j++) {
  if (j == 0) {
    ulbox.innerHTML += '<li class="cur"></li>'
  } else {
    ulbox.innerHTML += '<li></li>'
  }
}
// 通过标签名获取
var libox = ulbox.getElementsByTagName('li')
/*
  -======================================================
  */
// 定时轮播

// setInterval(方法,定时多少)
setInterval(function(){
  i++;
  // 判断是否是最后一张 将i设置为第一张继续下轮轮播
  if (i > imgarr.length - 1) {
    i = 0
  }
  imgid.src = 'img/'+imgarr[i]
  info.innerText = '一共'+imgarr.length+'张图片,' + '当前第 '+(i+1)+' 张'
  
  for (var j = 0; j < libox.length; j++) {
    if (j == i) {
      libox[j].className = 'cur'
    } else {
      libox[j].className = ''
    }
  }
}, 3000)
/* 
  -======================================================
  */
// 上一张图
function onPrev() {
  imgid.style.marginLeft = 0
  // 判断是否是第一张  将i设置为最后一张继续下轮轮播
  i--;
  if (i <= 0) {
    i = imgarr.length - 1 //可以获取最后一张图
  }
  imgid.src = 'img/'+imgarr[i]
  info.innerText = '一共'+imgarr.length+'张图片,' + '当前第 '+(i+1)+' 张'
  
  for (var j = 0; j < libox.length; j++) {
    if (j == i) {
      libox[j].className = 'cur'
    } else {
      libox[j].className = ''
    }
  }
}
/*
  -======================================================
  */
// 下一张图
function onNext() {
  i++;
  // 判断是否是最后一张 将i设置为第一张继续下轮轮播
  if (i > imgarr.length - 1) {
    i = 0
  }
  imgid.src = 'img/'+imgarr[i]
  info.innerText = '一共'+imgarr.length+'张图片,' + '当前第 '+(i+1)+' 张'
  
  // 轮播图位置标记
  for (var j = 0; j < libox.length; j++) {
    // 判断当前位置的下标和元素的下标是否相等，相等加className='cur'，不相等置空
    if (j == i) {
      libox[j].className = 'cur'
    }else {
      libox[j].className = ''
    }
  }
}`
  },
  {
    name: '复选框',
    url: '/demo/checkbox/index.html',
    id: 1,
    html: `<form method="post" action="">
  你爱好的运动是？<input type="checkbox" id="checkedAllBox" />全选/全不选 
  <br />
  <input type="checkbox" name="items" value="足球" />足球
  <input type="checkbox" name="items" value="篮球" />篮球
  <input type="checkbox" name="items" value="羽毛球" />羽毛球
  <input type="checkbox" name="items" value="乒乓球" />乒乓球
  <br />
  <input type="button" id="checkedAllBtn" value="全选" />
  <input type="button" id="checkedNoBtn" value="全不选" />
  <input type="button" id="checkedRevBtn" value="反选" />
  <input type="button" id="sendBtn" value="提交" />
</form>`,
    css: ``,
    js: `var allBox = document.getElementById('checkedAllBox');
var items = document.getElementsByName("items");
// checked
// 全选/全不选 
allBox.onclick = function() {
  for (var i = 0; i < items.length; i++) {
    items[i].checked = this.checked
  }
}
// 全选
var checkedAllBtn = document.getElementById('checkedAllBtn')
checkedAllBtn.onclick = function () {
  for (var i = 0; i < items.length; i++) {
    items[i].checked = true
  }
  allBox.checked = true
}

// 全不选
var checkedNoBtn = document.getElementById('checkedNoBtn')
checkedNoBtn.onclick = function() {
  for (var i = 0; i < items.length; i++) {
    items[i].checked = false
  }
  allBox.checked = false
}

// 反选
var checkedRevBtn = document.getElementById('checkedRevBtn')
checkedRevBtn.onclick = function() {
  allBox.checked = true;
  for (var i = 0; i < items.length; i++) {
    items[i].checked = !items[i].checked
    if (!items[i].checked) {
      allBox.checked = false
    }
  }
}

// 提交
var sendBtn = document.getElementById('sendBtn')
sendBtn.onclick = function() {
  for (var i = 0; i < items.length; i++) {
    // 判断多选框是否选中
    if (items[i].checked) {
      alert(items[i].value)
    }
  }
}

for (var i = 0; i < items.length; i++) {
  //为四个多选框分别绑定点击响应函数
  items[i].onclick = function() {
    //将allBox设置为选中状态
    allBox.checked = true;
    for (var j = 0; j < items.length; j++) {
      //判断四个多选框是否全选
      //只要有一个没选中则就不是全选
      if (!items[j].checked) {
        //一旦进入判断，则证明不是全选状态
        //将allBox设置为没选中状态
        allBox.checked = false;
        //一旦进入判断，则已经得出结果，不用再继续执行循环
        break;
      }
    }
  }
}`
  },
  {
    name: '乘法表',
    url: '/demo/minninenine/index.html',
    id: 2,
    html: '',
    css: `div{
  background: #409eff;
  margin: 2.5px;
  padding: 2px 8px;
  border-radius: 2px;
  color: #fff;
  font-size: 14px;
}`,
    js: `document.write('<table>');
for (let i = 1; i <= 9; i++) {
  document.write('<tr>');
  for (let j = 1; j <= i; j++) {
    document.write('<td><div>' + j + ' x ' + i + ' = ' + (j*i) + '</div></td>');
  }
  document.write('</tr>');
}
document.write('</table>');`
  },{
    name: '输出号码',
    url: '',
    id: 3,
    html: '点运行试试看',
    css: '',
    js: `
// 打印手机号码 18789126384
var num = [1,2,3,4,6,7,8,9] // 手机号码打乱排序并去重
var numIndex = [0,6,5,6,7,0,1,4,2,6,3] // numIndex数组元素对应的num数组元素索引
var phone = [] // 声明一个空数组用来存新输出的手机号码
var sum = ''
for (var i = 0; i < numIndex.length; i++) {
  sum+=num[numIndex[i]]+'' // 拼接号码
  phone.push(num[numIndex[i]])
}
document.write('手机号码：',sum) // 输出DOM元素
console.log(phone);
	`
  },
  {
    name: 'ToDoList',
    url: '/demo/ToDoList/index.html',
    id: 4,
    html: `<header>
  <div class="top">
    <label>todolist</label>
    <input type="text" id="val" placeholder="添加ToDo" />
  </div>
</header>
<div class="box">
  <h2>正在进行<span id="todocount">0</span></h2>
  <ul id="todo"></ul>
  <h2>已经完成<span id="donecount">0</span></h2>
  <ul id="done"></ul>
</div>`,
    css: `body,html{
  margin: 0;
}
body{
  background: #CDCDCD;
}
header{
  height: 50px;
  width: 100%;
  background: #333333;
}
.top{
  width: 600px;
  height: 100%;
  margin: 0 auto;
  line-height: 50px;
}
.top label{
  color: #fff;
  margin-right: 50px;
  font-size: 24px;
  vertical-align: bottom;
}
input{
  height: 25px;
  vertical-align: middle;
}
.box{
  width: 600px;
  margin: 0 auto;
}
h2{
  position: relative;
}
h2 span{
  position: absolute;
  top: 2px;
  right: 5px;
  display: inline-block;
  padding: 0 5px;
  height: 20px;
  border-radius: 20px;
  background: #E6E6FA;
  line-height: 22px;
  text-align: center;
  color: #666;
  font-size: 14px;
}
ul{
  padding: 0;
  list-style-type: none
}
ul li {
  position: relative;
  background: #fff;
  padding: 10px;
  margin-bottom: 5px;
}
.del{
  position: absolute;
  top: 2px;
  right: 5px;
  display: inline-block;
  width: 14px;
  height: 12px;
  border-radius: 14px;
  border: 6px double #FFF;
  background: #CCC;
  line-height: 14px;
  text-align: center;
  color: #FFF;
  font-weight: bold;
  font-size: 14px;
  cursor: pointer;
}
.check{
  height: 22px;
  width: 22px;
  margin-right: 10px;
}`,
    js: `// 添加用到的事件 onkeydown
// 1 数组方法 
// 1.1 往数组最后以为添加用：push(数组元素)
// 1.2 往数组前面添加用：unshift(数组元素)
// 1.3 删除数组任意一个元素：splice(数组元素下标,数组元素的个数)
// localStorage.setItem(属性名，属性值（只支持传字符串）)
// JSON.parse() 把字符串转成对象
// JSON.stringify() 把对象转成字符串
var val = document.getElementById('val')
var todo = document.getElementById('todo')
var done = document.getElementById('done')
var todolist = []
window.addEventListener('load', function(){
  // 按回车添加数据
  document.addEventListener('keydown', function(e){
    e = e || window.e
    if (e.keyCode === 13) {
      todo.innerHTML = ''
      todolist.unshift({
        title: val.value,
        done: false
      })
      localStorage.setItem('todo', JSON.stringify(todolist))
      todolistFun()
      val.value = ''
    }
    
  })
  // 初始状态
  if (localStorage.getItem('todo')) {
    todolistFun()
  }
})
// 删除
function liDel(e) {
  todo.innerHTML = ''
  todolist.splice(e,1)
  localStorage.setItem('todo', JSON.stringify(todolist))
  todolistFun()
}
// 封装赋值函数
function todolistFun() {
  done.innerHTML = ''
  todo.innerHTML = ''
  var todocount = 0
  var donecount = 0
  var datas = JSON.parse(localStorage.getItem('todo'));
  todolist = datas
  for (var j = 0; j < todolist.length; j++) {
    if (todolist[j].done) {
      donecount++
      done.innerHTML += '<li><input type="checkbox" class="check" checked onchange="oncheck('+j+','+todolist[j].done+')" />'+
        todolist[j].title +'<a class="del" onclick="liDel('+j+')">-</a></li>'
    } else {
      todocount++
      todo.innerHTML += '<li><input type="checkbox" class="check" onchange="oncheck('+j+','+todolist[j].done+')" />'+
      todolist[j].title +'<a class="del" onclick="liDel('+j+')">-</a></li>'
    }
  }
  todocount = document.getElementById('todocount').innerHTML = todocount
  donecount = document.getElementById('donecount').innerHTML = donecount
}
// 完成状态
function oncheck(e,b) {
  console.log(e,b);
  todolist[e].done = !b
  localStorage.setItem('todo', JSON.stringify(todolist))
  todolistFun()
}`
  },
  {
    name: 'navTab',
    url: '/demo/navTab/index.html',
    id: 5,
    html: `<div class="box">
<ul>
  <li class="cur">商品介绍</li>
  <li>规格与包装</li>
  <li>售后保障</li>
  <li>商品评价</li>
</ul>
<div class="tab-box">
  <div class="items" style="display: block;">商品介绍</div>
  <div class="items">规格与包装</div>
  <div class="items">售后保障</div>
  <div class="items">商品评价</div>
</div>
</div>`,
    css: `.box{
  width: 500px;
  margin: 50px auto 0;
}
ul{
  padding: 0;
  margin: 0;
  background-color: #f7f7f7;
  border: 1px solid #eee;
  border-bottom: 1px solid #e4393c;
}
li{
  list-style-type: none;
  padding: 0;
  display: inline-block;
  padding: 10px 25px;
  cursor: pointer;
  font-size: 14px;
}
.cur{
  background-color: #e4393c;
  color: #FFF;
}
.tab-box{
  padding: 10px;
}
.items{
  display: none;
}`,
    js: `/*
获取元素自定义属性: element.getAttribute('属性名')，只有一个参数
设置元素自定义属性: element.setAttribute(‘属性名’，‘属性值’) 两个参数： 第一个参数是属性名，第二个是属性值
通过标签名、class、id获取标签：document.querySelector()
document.querySelectorAll()
*/
// 通过标签名获取
// var query0 = document.querySelectorAll('div')
// 通过id获取
// var query1 = document.querySelector('#id')
// 通过class获取
// var query2 = document.querySelector('.class')

  // 获取li合集
  var li = document.getElementsByTagName('li')
  var items = document.getElementsByClassName('items')
  for (var i = 0; i < li.length; i++) {
    li[i].setAttribute('indexkey',i)
    
    // 给每个li添加点击事件
    li[i].onmouseenter = function (event) {
      for (var j = 0; j < li.length; j++) {
        // 给每个li去掉class=“cur”
        li[j].className = ''
      }
      // 当前点击的li添加class="cur"
      this.className = 'cur'
      // 当前li的下边
      var index = this.getAttribute('indexkey')
      
      for (var y = 0; y < items.length; y++) {
        // 所有itemsdisplay=“none”
        items[y].style.display = 'none'
      }
      // 当前点击的下标 index
      items[index].style.display = 'block'
    }
  }`
  }
]